<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后端代理之天气查询</title>
    <style>
        #container {
            width: 400px;
            min-height: 300px;
            background-color: skyblue;
            margin: auto;
            padding: 10px;
            text-align: center;
        }
        #sousuo{
            margin: 20px 0px;
        }
        ul {
            list-style: none;
            text-align: left;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="sousuo">
            <h1>天气信息查询</h1>
            <input type="text" id="city" placeholder="请输入城市名称" />
            <input type="button" id="btn" value="查询" />
        </div>
        <div id="info">
            <!-- <h3>北京</h3>
            <p>2020年07月11日08时</p>
            <p>五月廿一</p>
            <p>湿度：49 | 温度：28 | 多云</p>
            <p>西南风 | 2级</p>
            <p>-----------</p>
            <p>近五天的天气变化</p> -->
            
        </div>
    </div>

    <script>
        var btn = document.querySelector('#btn');
        var city = document.querySelector('#city');
        var info = document.querySelector('#info');

        btn.onclick = () =>{
            // 值获取
            var city_value = city.value;

            // 创建、配置、发送
            var xhr = new XMLHttpRequest();
            xhr.open("GET","./06_weather.php?city="+city_value);
            xhr.send();

            // 响应处理
            xhr.onreadystatechange = () =>{
                if(xhr.readyState===4&&/^2\d{2}/.test(xhr.status)){
                    var data = xhr.responseText;

                    if(data==0){
                        info.innerHTML = "请求失败！！";
                    }else if(data==-1){
                        info.innerHTML = "城市不能为空或暂不支持该城市或城市名不正确！！";
                    }else if(JSON.parse(data).error_code==0){
                        data = JSON.parse(data).result.data;
                        // 近五天的天气变化
                        var future = '';
                        data.weather.forEach(({date,info,nongli,week})=>{
                            // 早中晚
                            var info_value = '';
                            for(var key in info){
                                info[key] = info[key].slice(1);
                                info_value += `
                                    <p>${key}：${info[key].join(' | ')}</p>
                                `;
                            }
                            future += `
                                <h4>${date}</h4>
                                <p>${nongli}</p>
                                <p>周${week}</p>
                                <p>${date}</p>
                                <p>${info_value}</p>
                            `;
                        })

                        // 数据渲染
                        info.innerHTML =`
                            <h2>${data.realtime.city_name}</h2>
                            <p>${data.realtime.date} | ${data.realtime.time}</p>
                            <p>${data.realtime.moon}</p>
                            <p>湿度：${data.realtime.weather.humidity} | 温度：${data.realtime.weather.temperature}℃ | ${data.realtime.weather.info}</p>
                            <p>${data.realtime.wind.direct} | ${data.realtime.wind.power}</p>
                            <p>-----------</p>
                            <h3>近五天的天气变化</h3>
                            <p>${future}</p>
                        `;
                    }
                }
            }
        }
        
    </script>
</body>
</html>